<template>
  <div class="sousuo">
    <div class="top">
      <router-link to="" @click.native="fanHui()">&lt;</router-link>
      <div class="top_title">商品搜索</div>
    </div>
    <div class="suo_sou">
      <div class="kuang">
        <i class="iconfont icon-sousuo"></i>
        <input type="text" />
        <span>搜索</span>
      </div>
    </div>
    <div class="sai_suan">
      <ul>
        <li @click="zongHe()">
          <span :class="{yanSe:flag==null}">综合</span>
        </li>
        <li class="gg_yangs" @click="xiaoLiang()">
          <span :class="{yanSe:flag==false}">销量</span>
          <div v-show="flag==false">
            <span :class="{yanSe:flag1==true}">▲</span>
            <span :class="{yanSe:flag1==false}">▼</span>
          </div>
        </li>
        <li class="gg_yangs" @click="jiaGe()">
          <span :class="{yanSe:flag==true}">价格</span>
          <div v-show="flag==true">
            <span :class="{yanSe:flag2==true}">▲</span>
            <span :class="{yanSe:flag2==false}">▼</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="zong_shop" v-for="(item,index) in shop" :key="index">
      <router-link to="/Gdetails" @click.native="zhuanXq(index)">
        <div>
          <img :src="item.img" alt="" />
        </div>
        <div>
          <p>{{item.title}}</p>
          <p>
            <del v-if="item.title1!=''">￥{{item.title1}}</del>
            <ins :class="{ztYan:item.title1==''}">￥{{item.title2}}</ins>
          </p>
          <div>
            <span>销量：{{item.title3}}</span>
            <span class="iconfont icon-gouwuchecopy"></span>
          </div>
        </div>
      </router-link>
    </div>

  </div>
</template>

<script>
export default {
  data(){
    return {
      // xinXi:'',
      flag:null,
      // 销量
      flag1:false,
      // 价格
      flag2:false,
      shop:[]
      
    }
  },
  methods:{
    zongHe(){
      this.$axios.get('http://47.114.130.21:3000/sousuo').then((data)=>{
      this.shop=JSON.parse(data.data[0].shop)
    })
      this.flag=null;
    },
    xiaoLiang(){
      this.flag=false;
      this.flag1=!this.flag1
      if(this.flag1){
        this.shop.sort(function(a,b){
          return a.title3-b.title3
        })
      }else{
        this.shop.sort(function(a,b){
          return b.title3-a.title3
        })
      }
    },
    jiaGe(){
      this.flag=true;
      this.flag2=!this.flag2
      if(this.flag2){
        this.shop.sort(function(a,b){
          return a.title2-b.title2
        })
      }else{
        this.shop.sort(function(a,b){
          return b.title2-a.title2
        })
      }
    },
    fanHui(){
      window.history.go(-1)
    },
    zhuanXq(index){
      localStorage.setItem('xqXx',JSON.stringify(this.shop[index]));
    }
  },
  mounted(){
    this.$axios.get('http://47.114.130.21:3000/sousuo').then((data)=>{
      this.shop=JSON.parse(data.data[0].shop)
    })
  }
}
</script>


<style lang="less" scoped>
.ztYan{
      color:#000 !important;
    }
.sousuo {
  margin-bottom: 50px;
  margin-top: 0.133333rem;
  .suo_sou {
    height: 1.093333rem;
    margin: 0.133333rem 0 0px;
    padding: 0.133333rem 0;
    background: #EFEFF4;
    width: 100%;
    border-bottom: 1px solid #d6d6db;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 45px;
    .kuang {
      height: 100%;
      width: 90%;
      position: relative;
      input {
        border-radius: 2px;
        outline: none;
        border: none;
        width: 100%;
        height: 100%;
        background: #ffffff;
        padding-left: 0.8rem;
      }
      :last-child {
        line-height: 0.8rem;
        font-size: 14px;
        color: #888888;
        cursor: pointer;
        height: 100%;
        width: 1.6rem;
        position: absolute;
        right: 0px;
        text-align: center;
      }
      i {
        color: #888888;
        font-size: 20px;
        position: absolute;
        left: 0.08rem;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
  .sai_suan {
    border-bottom: 1px solid #E5E5E5;
    background: #ffffff;
    width: 100%;
    .yanSe{
      color: #de0a2b !important;
    }
    ul {
      width: 100%;
      height: 0.8rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      li {
        height: 100%;
        width: 33.33%;
        font-size: 13px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #333333;
      }
      .gg_yangs {
        > div {
          line-height: 10px;
          height: 100%;
          margin-left: 0.133333rem;
          display: flex;
          justify-content: center;
          flex-flow: column;
          span {
            color: #999999;
            display: block;
            font-size: 12px;
          }
        }
      }
    }
  }
  .zong_shop{
      background: #F8F8F8;
      height: 2.666667rem;
      border-bottom: 1px solid #E5E5E5;
      width: 100%;
      padding: 0.133333rem 0.266667rem;
      a{
          height: 100%;
          width: 100%;
          display: flex;
          flex-flow: row;
          >:first-child{
                height: 100%;
                padding: 0.133333rem;
                margin-right: 0.266667rem;
                img{
                    height: 100%;
                }
          }
          >:last-child{
              width: 70%;
              height: 100%;
              display: flex;
              flex-flow: column;
              justify-content: space-around;
              font-size: 14px;
              >:nth-child(1){
                width: 100%;
                color: #353535;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              >:nth-child(2){
                span{
                  color: #353535;
                   margin-right: 0.133333rem;
                }
                  del{
                      color: #353535;
                      margin-right: 0.133333rem;
                  }
                  ins{
                      text-decoration: none;
                      color:#de0a2b
                  }
              }
              >:last-child{
                  display: flex;
                  justify-content: space-between;
                  :first-child{
                      color: #A9A9A9;
                  }
                  :last-child{
                      color: #353535;
                  }
              }
          }
      }
  }
}
</style>